<template>
    <div class="checkbox-tags">
        <div 
        class="classify" 
        v-for="(item, index) in data" 
        :key="index"
        >
            <div class="title">{{item.label}}</div>

            <div class="children">
                <item-tag 
                class="tag-item"
                v-for="(child, i) in item.children" 
                :key="i"
                :active="~model.indexOf(child[props.value])"
                @click="checkHandler(child)"
                >
                    {{child.label}}
                </item-tag>
            </div>
        </div>
    </div>
</template>

<script>
import itemTag from './item-tag';

export default {
    components: {
        itemTag,
    },
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        value: {
            type: Array,
            default: () => [],
        },
        props: {
            type: Object,
            default: () => ({
                label: 'label',
                value: 'label',
            }),
        },
    },
    data: () => ({
        
    }),
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },
    methods: {
        checkHandler(item) {
            var value = item[this.props.value],
                index = -1;
            if(index = this.model.indexOf(value), ~index) {
                // 取消选中
                this.model.splice(index, 1);
            } else {
                // 选中
                this.model.push(value);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .checkbox-tags{
        overflow: hidden;

        .classify{
            .title{
                font-size: 16px;
                line-height: 1em;
                padding: 10px 0;
                border-bottom: 1px solid #f0f0f0;
                color: #666;
            }

            .children{
                overflow: hidden;
                padding-top: 24px;
                margin-right: -20px;

                .tag-item{
                    float: left;
                    margin-right: 20px;
                    margin-bottom: 20px;
                }
            }
        }
    }
</style>